webpack 引入未模块化的库 |

一、开始

1.1 问题

用 webpack 打包项目时，如果用 import 导入 Zepto 这种使用 AMD 规范化的库，会报一个 Uncaught TypeError: Cannot read property 'createElement' of undefined 的错误。

1.2 解决方法

webpack 要使用两个 loader：exports-loader 和 script-loader

1	$ npm i -D script-loader exports-loader

配置方法1：

webpack.config

{
  // ...
  module: {
    loaders: [{
      test: require.resolve('zepto'),
      loader: 'exports-loader?window.Zepto!script-loader'
    }]
  }
}

文件引用

1	import $ from 'zepto`

配置方法2：

使用官方的一个插件：webpack.ProvidePlugin

webpack.ProvidePlugin 是一个依赖注入类型的插件，可以让你在使用指定变量时，比如直接使用 $ 时，自动加载指定的模块 zepto，并将其暴露的对象赋值给 $：

// webpack.config
{
  // ...
  plugins: [
    new webpack.ProvidePlugin({
      $: 'zepto',
      // 把 Zepto 导入为 abc 变量也可以
      abc: 'zepto'
    })
    // ...
  ]
}

这样就可以直接使用赋值了 Zepto 对象的 $/abc 变量了，不再需要 import $ from 'zepto'

1.3 其它

如果是 vue-cli 生成的项目，需要修改 webpack.base.conf.js 这个文件

 module: {
    rules: [
      {
        test: require.resolve('zepto'),
        loader: 'exports-loader?window.Zepto!script-loader'
      }
	]
}